.basic-layout {
  height: 100vh;
  // width: 100vw; // 2.1.6
  // display: flex; // 2.1.6

  &--sider {
    position: relative;
    background-color: @sider-background;

    .ant-menu-sub {
      background: @menu-sub-background !important;
    }

    .sider-menu {
      .ant-menu.ant-menu-dark,
      .ant-menu-dark .ant-menu-sub,
      .ant-menu.ant-menu-dark .ant-menu-sub {
        background: none;
      }
    }
  }

  &--header {
    // position: relative; // 2.1.6
    z-index: 1000;
    // height: 64px; // 2.1.6
    // line-height: 64px; // 2.1.6
    padding: 0;
    background: @component-background;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

    .collapsed-btn {
      display: inline-block;
      font-size: 20px;
      padding: 0 20px;

      > *:hover {
        color: @primary-color;
      }
    }

    .right-box {
      float: right;
      display: flex;
      padding: 0 20px;

      .right-item {
        display: flex;
        padding: 0 8px;
        align-items: center;
        cursor: pointer;

        &:hover {
          background: @component-background;
        }

        &--icon {
          font-size: 18px;
        }
      }

      &:first-child {
        margin-left: 0;
      }
    }
  }

  &--content {
    position: relative;
    width: 100%;
    overflow: auto;
    // padding: 24px 16px;
    > :first-child.fade-slide-leave-active {
      position: absolute;
      left: 16px;
      right: 16px;
    }
  }

  &--footer {
    padding: 0;
  }
}

// main Content 2.1.6
// .main-content {
//   display: flex;
//   flex-direction: column;
//   width: 100%;
//   background: #f7f8f9;
// }

// menu
.sider-menu {
  position: relative;
  height: calc(100% - 64px);
  overflow: auto;
}

// avatar
.as-avatar {
  display: inline-block;

  .ant-dropdown-link {
    display: block;
    min-height: 64px;
    cursor: pointer;
  }
}
